<!--
* @Description: 设置自动获取规则
* @Author: yihua
* @Date: 2023/4/3 19:48
* @LastEditTime: 2023/4/3 19:48
-->
<template>
  <div class="formula-dialog" v-if="dialogVisible">
    <el-dialog v-model="dialogVisible" title="设置自动获取规则" width="1000px" @close="dialogVisible = false">
      <div class="edit_container">
        <div class="edit_res">
          <div class="edit_res_title">
            <span style="margin-right: 10px">公式</span>
            <el-tooltip  effect="dark" content="输入框支持输入数学表达式,且可以从右侧选择项目插入到数学表达式中进行运算,例如 'item1*2+item2'" placement="top" popper-class="space-auth-status-tip">
              <el-icon :size="16" style="vertical-align:-2px;"><Warning /></el-icon>
            </el-tooltip>
          </div>
          <div id="edit_content" class="edit_content" spellcheck="false" ref="editContent"
               v-html="html" @input="handleInputEvent" @blur="handleBlurEvent"
               contenteditable="true" >
          </div>
          <!--
            <a style="color:#12C4DC;border:none;padding:2px;user-select:none" data="$54$" class="ident">TR2</a>
            <a style="color:#000;padding: 0 2px">*</a>
            <a style="color:#12C4DC;border:none;padding:2px;user-select:none" data="$51$" class="ident">Warehouse Air Condition</a>-->
          <el-button type="primary" ghost style="width: 80px;margin-top:15px" @click="clearInput">清除</el-button>
        </div>
        <div class="edit_action">
          <div class="value_panel">
            <div class="tree-tips">监控点</div>
            <!--<el-input v-model="filterText" placeholder="Filter keyword" />-->
            <el-tree
                    :data="clearData.result.pointList"
                    :props="{ children: 'children',label: 'pointName',}"
                    accordion
                    @node-click="handleNodeClick"
            />
          </div>
        </div>
        <div class="edit_action">
          <div class="value_panel">
            <div class="tree-tips">算法</div>
            <el-tree
                    :data="unSetPointListArr"
                    :props="{ children: 'children',label: 'pointName',}"
                    accordion
                    @node-click="handleNodeClick"
            />
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeSubmitFn">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { reactive, defineProps, getCurrentInstance,defineExpose, nextTick, ref, watch ,defineEmits } from 'vue';
  import { delHtmlTag } from '@/utils/stringUtils';
  type FormInstance = InstanceType<typeof ElForm>;
  let dialogVisible = ref(false)


  import { typeMap,typeRevetMap,clearData }  from './backRes.ts'

  interface Props {
    modelType?: number, // 1
    monthNumber?:number,
  }

  const props = defineProps<Props>()
  const {modelType,monthNumber} = props

  const { ctx, proxy } = getCurrentInstance() as any

  let unSetPointList = ref(clearData.result.unSetPointList);
  let unSetPointListArr = ref([]);

  let html = ref('')

  let clickedArr = [];

  // 弹出框右侧的属性点击
  const handleNodeClick = (data: any) => {
    console.log('shu',data)
    console.log();
    let htmlString = ctx.$refs.editContent.innerHTML;
    clickedArr.push({id:data.pointId,name:data.pointName});
    // ctx.$refs.editContent.innerHTML = html + `<a style="color:#12C4DC;border:none;padding:2px;user-select:none" data="$${data.pointId}$" class="ident">${data.pointName}</a>`
    html.value = htmlString +`<a style="color:#12C4DC;border:none;padding:2px;user-select:none" data="$${data.pointId}$" class="ident">${data.pointName}</a><a style="color:#000;padding: 0 2px">&nbsp;</a>`
  }


  let clearInput = (e) => {
    html.value = '';
  }
  let inputTimer;
  const handleInputEvent = (e) => {
    clearTimeout(inputTimer)

    inputTimer = setTimeout(()=>{
      if(e.inputType === "deleteContentBackward") {

      }
      if(e.inputType == "insertText") {
        console.log('aaaa',e.data);
        console.log('6666',e.target.innerHTML);
        html.value = e.target.innerHTML
      }
    },1000);

  }
  const handleBlurEvent =  (e) => {
  }
  const setVal = (val) => {
    this.$refs.div.innerHTML = val
  }

  watch(
    () => html,
    (newValue, oldValue) => {
      console.log(newValue , oldValue);
      console.log(html);
    },
    { deep: true }
  )

  // 初始化方法
  const open =  (row) => {
    nextTick(()=>{
      dialogVisible.value = true
    })
  };

  let emits = defineEmits(['changeAlgorithmInput'])
  const changeSubmitFn = (formEl: FormInstance | undefined) => {
    emits('changeAlgorithmInput',{
      rowNumber:modelType || 0 ,
      value:html.value
    })
    dialogVisible.value = false
  }

  defineExpose({open})
</script>

<style scoped lang="scss">
  :deep{
    .el-dialog__body {
      padding: 0 5px;
    }
  }
  .edit_container{
    display: flex;
  }
  .edit_res {
    display: flex;
    flex-direction: column;
    width: 368px;
    height: 400px;
    padding: 24px 16px 10px;
    overflow-y: auto;
    border-right: 1px solid #d9d9d9;
    .rule_editor .edit_container .edit_res_title {
      display: inline-flex;
      margin-bottom: 10px;
      align-items: center;
      font-weight: 600;
    }
    .edit_content{
      margin-top: 10px;
      flex: 1 1;
      padding: 5px;
      border: 1px solid #d9d9d9;
      outline: none;
    }
  }
  .edit_action {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    padding: 24px 16px 5px;
    max-height: 400px;
    border-right: 1px solid #d9d9d9;
    &:last-child{
      border-right: 0 !important;
    }
    .value_panel{
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: auto;
    }
  }
  .tree-tips{
    color: rgba(0,0,0,.25);
    cursor: not-allowed;
    padding:10px 0 ;
  }

</style>